<template>
  <div class="search_main">
    <!-- 搜索 -->
    <van-search
      v-model="value"
      placeholder="搜索商品信息"
      disabled
      @click="gosearch"
    />
    <!-- 轮播-->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in imgs" :key="index">
        <img :src="item.img" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="nav_pic">
      <img src="../../assets/imgs/c1.png" alt="" />
    </div>
    <!-- 倒计时的爱 -->
    <div class="timeshop">
      <div class="time_top">
        <div>限时购:</div>

        <van-count-down class="time" :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <!-- 宫格 -->
      <van-grid :column-num="3"  >
        <van-grid-item class="grid_item" :text="add.pic" v-for="add in datas.timeimg" :key="add.i">
        <van-image :src="add.img" class="vanimg" /> 
            <p>现价:{{add.pic}}</p>
            <p>原价:{{add.oldpic}}</p>
        </van-grid-item>     
      </van-grid>
    </div>
    <!-- 分类导航 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
      imgs: [
        { img: require("../../assets/imgs/b1.jpg") },
        { img: require("../../assets/imgs/b2.jpg") },
        { img: require("../../assets/imgs/b3.jpg") },
        { img: require("../../assets/imgs/b4.jpg") },
      ],
      
      datas:{
          timeimg:[
            { img: require("../../assets/imgs/3.png"),pic:'88元' ,oldpic:'120元' },
            { img: require("../../assets/imgs/3.png"),pic:'88元' ,oldpic:'120元' },
            { img: require("../../assets/imgs/3.png"),pic:'88元' ,oldpic:'120元' },
          ]
      },

      value: "",
    };
  },
  methods: {
    gosearch() {
      this.$router.push("/searchgoods");
    },
  },
};
</script>

<style lang="less" scoped>
.search_main{
    width: 98%;
    height: 100%;
    margin: 10px auto 60px;
    // padding: 20px;
    // margin-bottom: 60px;
}
*{
    padding: 0;
    margin: 0;
}
.my-swipe .van-swipe-item {
  width: 100%;
  color: #fff;
  img {
    width: 100%;
  }
}
.nav_pic {
  width: 100%;
  overflow: hidden;
  img {
    width: 100%;
  }
}
.timeshop {
  width: 94%;
  margin: 10px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
padding: 5px;
  .time_top {
    display: flex;
    line-height: 22px;
    .time {
      line-height: 22px;
      .colon {
        display: inline-block;
        margin: 0 4px;
        color: #ee0a24;
      }
      .block {
        display: inline-block;
        width: 22px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background-color: #ee0a24;
      }
    }
  }
}
.grid_item{
   height: 30%;

    .vanimg{
        height: 30%;
    }
}
</style>